<template>
  <div class="app-container">
    <div>
      <el-form ref="form" :model="queryParams" label-width="80px" inline>
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="queryParams.name" size="small"/>
        </el-form-item>
        <el-form-item label="字典模块" prop="module">
          <el-input v-model="queryParams.module" size="small"/>
        </el-form-item>
        <el-form-item label="属性" prop="property">
          <el-input v-model="queryParams.property" size="small"/>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="addFormVisible = true" size="small">添加</el-button>
          <el-button type="primary" @click="getList" size="small">查询</el-button>
          <el-button type="primary" @click="resetForm('form')" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table v-loading="tableLoading"
                :data="tableData"
                height="600"
                border>
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="字典模块" prop="module"></el-table-column>
        <el-table-column label="字典名称" prop="name"></el-table-column>
        <el-table-column label="字典属性" prop="property"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button-group>
              <el-button type="text"  size="small"  @click="()=>{checkedModuleId = scope.row.dictId;viewVisible = true;}">查看</el-button>
              <el-button  type="text" size="small" @click="setEditData(scope.row)" >编辑</el-button>
              <el-popconfirm
                confirm-button-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                @confirm="remove(scope.row)"
                title="确定删除吗？"
              >
                <el-button  type="text" size="small" slot="reference"  >删除</el-button>
              </el-popconfirm>
            </el-button-group>


          </template>
        </el-table-column>
      </el-table>
      <Pagination
        background
        :page-sizes="pageWrapper.pageSizes"
        :total="pageWrapper.total"
        :limit.sync="pageWrapper.size"
        :page.sync="pageWrapper.current"
        auto-scroll
        @pagination="getList"
        layout="sizes,prev, pager, next"
      />
    </div>

    <!-- form  -->

    <el-dialog title="添加" :visible.sync="addFormVisible" @close="()=>{this.resetForm('addForm')}">
      <el-form ref="addForm" label-width="80" :rules="addRules" :model="addFormData">
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="addFormData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典模块" prop="module">
          <el-input v-model="addFormData.module" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典属性" prop="property">
          <el-input v-model="addFormData.property" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createDict('addForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="editFormVisible" @close="()=>{this.resetForm('editForm')}">
      <el-form ref="editForm" label-width="80" :rules="editRules" :model="editFormData">
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="editFormData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典模块" prop="module">
          <el-input v-model="editFormData.module" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典属性" prop="property">
          <el-input v-model="editFormData.property" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateDict('editForm')">确 定</el-button>
      </div>
    </el-dialog>

  <!--view-->
    <el-dialog  :visible.sync="viewVisible" footer=""  :close-on-click-modal="false">
      <DictItem :dictId="checkedModuleId"/>
    </el-dialog>



  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {pageData, create, update, removeById} from "@/api/system/dict";
import {pageMixin, formMixin} from "@/mixins/mixins";
import DictItem from "@/views/system/dict/DictItem";


export default {
  name: "Dict",
  mixins: [pageMixin, formMixin],
  components: {DictItem, Pagination},
  data() {
    return {
      tableLoading: false,
      tableData: [],
      queryParams: {
        module: '',
        property: '',
        name: ''
      },
      addFormVisible:false,
      editFormVisible:false,
      viewVisible:false,
      addFormData:{
        name:'',
        module:'',
        property:'',
      },
      checkedModuleId:'',

      editFormData:{
        name:'',
        module:'',
        property:'',
        dictId:''
      },
      addRules:{
        name:[{required:true}],
        property:[{required:true}],
        module:[{required:true}]
      },
      editRules:{
        name:[{required:true}],
        property:[{required:true}],
        module:[{required:true}]
      },
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.tableLoading = true;
      pageData({current: this.pageWrapper.current, size: this.pageWrapper.size, ...this.queryParams}).then(res => {
        this.setPageWrapper(res.data);
        this.tableData = res.data.records;
        this.tableLoading = false;
      })
    },
    setEditData(row){
      Object.keys(this.editFormData).forEach(key =>{
        this.editFormData[key] = row[key]
      })
      this.editFormVisible = true;
    },
    updateDict(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update(this.editFormData).then(res =>{
            this.$notify['success']({
              title:res.message
            })
            this.getList();
            this.editFormVisible = false;
          })
        }
      });
    },
    createDict(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          create(this.addFormData).then(res =>{
            this.$notify['success']({
              title:res.message
            })
            this.getList();
            this.addFormVisible = false;
          })
        }
      });
    },
    remove(row){
      removeById(row.dictId).then(res =>{
        this.$notify['success']({
          title:res.message
        })
        this.getList();
      })
    },


  }
}
</script>

<style scoped>

</style>
